<!--
 * @Author: li bo
 * @Date: 2025/09/30 14:27:22
 * @LastEditors: li bo
 * @Description: "播放器控件"
 -->
<template>
    <div class="flx-justify-between container">
        <!-- 歌曲时间 -->
        <div class="time">
            <span class="current">00:00</span>
            <span> / </span>
            <span class="total">00:00</span>
        </div>
        <!-- 按钮操作 -->
        <div class="flx-align-center control">
            <div class="pre">
                <i class="iconfont icon-shangyishouge"></i>
            </div>
            <div class="is_play" @click="isPlay = !isPlay">
                <i v-show="isPlay" class="iconfont icon-bofang"></i>
                <i v-show="!isPlay" class="iconfont icon-zanting"></i>
            </div>
            <div class="next">
                <i class="iconfont icon-xiayishou"></i>
            </div>
        </div>
        <!-- 更多操作 -->
        <div class="flx-justify-between more">
            <!-- 音量 -->
            <el-popover
                popper-class="volume_popper"
                placement="top"
                trigger="hover">
                <el-slider
                    v-model="volume"
                    :min="0"
                    :max="100"
                    size="small" />
                <template #reference>
                    <div class="volume">
                        <i v-show="volume === 0" class="iconfont icon-guanbishengyin"></i>
                        <i v-show="volume > 0 && volume < 80 " class="iconfont icon-zhongdengyinliang"></i>
                        <i v-show="volume > 80" class="iconfont icon-zuidayinliang"></i>
                    </div>
                </template>
            </el-popover>
            <div class="play_list" @click="playListClick">
                <i class="iconfont icon-bofanggedan"></i>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { musicStore } from "@/store/music/musicStore.js"
const { playerSetting } = storeToRefs(musicStore());

// ========================= 歌曲 =========================
const isPlay = ref(false);
const playListClick = () => {
    playerSetting.value.playSongStatus = !playerSetting.value.playSongStatus;
}

// 歌曲音量
let volume = ref(0);

</script>

<style scoped lang="scss">
    @import '@/theme/public.scss';
    @import './player-control.scss';
</style>